<!--
 * @Author: 陈俊升 761723995@qq.com
 * @Date: 2023-11-07 09:43:46
 * @LastEditors: 陈俊升 761723995@qq.com
 * @LastEditTime: 2023-12-13 15:08:49
 * @FilePath: /hr_new_vue3/src/views/Management/Contract/BaseSetting/ContractTemplate/Components/AddTemplate/ContractBaseInfo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 合同基础设置 -->
<template>
  <div class="index">
    <a-form
      :model="formData.baseInfoData"
      ref="refForm"
      :rules="rules"
      auto-label-width
    >
      <a-form-item label="意向表名称" field="name" show-colon>
        <a-input v-model="formData.baseInfoData.name"></a-input>
      </a-form-item>
      <a-form-item label="被沟通人" field="userName" show-colon>
        <a-input v-model="userName" disabled></a-input>
      </a-form-item>
      <a-form-item label="沟通负责人" field="responseId" show-colon>
        <a-radio-group v-model="responseFlag" @change="responseChange">
          <a-radio :value="1">直接主管</a-radio>
          <a-radio :value="2">指定人员</a-radio>
        </a-radio-group>
        <div v-if="responseFlag === 2">
          <a-button type="outline" @click="humanModalVisible = true"
            >选择人员</a-button
          >
          您已选择
          <span class="ml-3 text-blue">{{ responseName }} </span>
        </div>
      </a-form-item>
      <a-form-item label="续签意向模板模板" field="templateId" show-colon>
        <a-select
          placeholder="请选择模板"
          v-model="formData.baseInfoData.templateId"
          @change="templateChange"
        >
          <a-option
            v-for="item in templateList"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          ></a-option>
        </a-select>
      </a-form-item>
      <a-form-item label="备注" field="remark" show-colon>
        <a-textarea
          v-model="formData.baseInfoData.remark"
          show-word-limit
          :max-length="50"
          :auto-size="{
            minRows: 4
          }"
        ></a-textarea>
      </a-form-item>
    </a-form>
  </div>
  <HumanRosterModal
    v-model:visible="humanModalVisible"
    @humanRosterEmit="humanRosterEmit"
  />
</template>

<script setup lang="ts">
import { useContractStore } from '@/store';
import { useVModel } from '@vueuse/core';
import { cloneDeep } from 'lodash';
import {
  GetContractRenewalTemplateList,
  GetContractRenewalTemplateDetail
} from '@/apis/management/contract/baseSetting';

const props = withDefaults(
  defineProps<{
    data: any;
  }>(),
  {}
);

const rules = reactive({
  name: [
    {
      required: true,
      message: '请选择'
    }
  ],
  responseId: [
    {
      required: true,
      message: '请选择'
    }
  ],
  templateId: [
    {
      required: true,
      message: '请选择'
    }
  ]
});
const emit = defineEmits(['update:data']);
// const formData = ref<any>({
//   name: '',
//   enterprise: 1,
//   templateId: undefined,
//   templateName: '',
//   annexIds: [],
//   annexName: [],
//   remark: ''
// });
const formData = useVModel(props, 'data', emit);
let userName = ref(''); // 沟通人名称
let responseFlag = ref(1); // 判断用户选择直接主管还是指定人 1直接主管 2指定人
let responseName = ref(''); // 负责人名称
watch(
  () => props.data.userData,
  (newVal: any) => {
    let tempUserName = [];
    newVal.forEach((el: any) => {
      tempUserName.push(el.name);
    });
    userName.value = tempUserName.join('、');
  },
  {
    deep: true
  }
);
const refForm = ref();
const validate = async () => {
  const check = await refForm.value.validate();
  console.log('=========================checkcheck===========');
  console.log(check);
  console.log('====================================');
  return check;
};

let humanModalVisible = ref(false);

let templateList = ref([]); // 储存模板列表
const getData = async () => {
  try {
    const [templateListRes] = await Promise.all([
      GetContractRenewalTemplateList({
        ownerType: 1,
        pageNumber: 0,
        pageSize: -1
      })
    ]);
    templateList.value = templateListRes.content;
  } catch (error: unknown) {
    console.log(error);
  }
};
getData();

// 改变沟通负责人的选取防守
const responseChange = (val: number) => {
  if (val === 1) {
    //
  }
};

const humanRosterEmit = (val: any) => {
  responseName.value = val.name;
  formData.value.baseInfoData.responseId = val.id;
  humanModalVisible.value = false;
  console.log(val);
};

const templateChange = async (id: number) => {
  try {
    const record: any = await GetContractRenewalTemplateDetail({
      id
    });
    formData.value.previewData = record.collectionModel;
  } catch (error: unknown) {
    console.log(error);
  }
};

defineExpose({ formData, validate });
</script>

<style lang="less" scoped>
.index {
  width: 800px;
  margin: 0 auto;
}
</style>
